<template>
  <div id="app">
    <button @click="toNull">重置数量</button>
    <table border="1">
      <tr>
        <th>类别</th>
        <th>单价</th>
        <th>减</th>
        <th>个数</th>
        <th>加</th>
      </tr>
      <tr v-for="(value,index) of array" :key="index">
        <td>{{value.name}}</td>
        <td>{{value.price}}</td>
        <td><button @click="sub(index)">-</button></td>
        <td>{{value.number}}</td>
        <td><button @click="add(index)">+</button></td>
      </tr>
    </table>
    <p>总价：{{sum}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
      array:[
        {name:"苹果",price:1.6,number:0},
        {name:"香蕉",price:2.6,number:0},
        {name:"葡萄",price:3.6,number:0},
        {name:"鸭梨",price:4.6,number:0}
      ]
    }
  },
  methods: {
    add(index){
      this.array[index].number++;
    },
    sub(index){
      if(this.array[index].number>0){
        this.array[index].number--;
      }
    },
    toNull(){
      for (let i = 0; i < this.array.length; i++) {
        this.array[i].number=0;
      }
    }
  },
  computed:{
    sum(){
      let sums=0;
      for (let i = 0; i < this.array.length; i++) {
        sums=(((this.array[i].number*this.array[i].price)*10+sums*10)/10).toFixed(1);
      }
      return sums;
    }
  }
}  
</script>
<style> 
</style>
